<html>
<head>
	<script src="www/tf.min.js"></script>
	<script src="www/tf-automl.min.js"></script>
	<script src="www/jquery-1.10.0.js"></script>
	<style>
		body {
			background: #F4F6F7 url('www/bgground.png') no-repeat;
			margin-right: 200px;
			background-size:cover;
		}
	</style>
</head>
<body >
<div id="console"></div>
<center>

	<video autoplay playsinline muted id="webcam" width="800" height="300" style="position:fixed;margin-top:5%;left:22%;margin-top:5%"></video>


	<div id="predictions-mask" style="position:absolute;margin-top:28%;left:40%;font-family:Comic Sans MS, cursive, sans-serif; font-size:28px;background-color:#F4D03F"></div>
	<div id="predictions-no-mask" style="position:absolute;margin-top:28%;left:52%;font-family:Comic Sans MS, cursive, sans-serif; font-size:28px;background-color:#F4D03F"></div>

</center>
<center>



	<button type="button" id="startPredicting" style="position:absolute;width:200px;left:28%;margin-top:35%;background-color:#239B56; font-size:32px; padding: 32px 16px; border-radius: 20px; border: 3px solid #17202A" onclick="startPredicting()" >Start</button>
	<button type="button" id="stopPredicting" style="position:absolute;width:200px;left:58%;margin-top:35%;background-color:#f44336; font-size:32px; padding: 32px 16px; border-radius: 20px; border: 3px solid #17202A" onclick="stopPredicting()" >Stop</button>

</center>
</body>
<script>
	const webcamElement= document.getElementById('webcam');

	let net;

	let isPredicting = false;

	let result;

	function startPredicting(){
		isPredicting=true;
		app();
	}

	function stopPredicting(){
		isPredicting=false;
		app();
	}



	async function app(){
		console.log('Loading model..');
		net= await tf.automl.loadImageClassification('./sp-model/model.json');
		console.log('Successfully loaded model');

		const webcam = await tf.data.webcam(webcamElement);
		while(isPredicting){

			const img = await webcam.capture();

			result = await net.classify(img);

			document.getElementById("predictions-mask").innerText=result['0']['label']+": "+Math.round(result['0']['prob']*100)+"%";
			document.getElementById("predictions-no-mask").innerText=result['1']['label']+": "+Math.round(result['1']['prob']*100)+"%";




			img.dispose();

			await tf.nextFrame();

		}

	}

	$("startPredicting").click(function(){
		const test= result['0']['prob'];
		console.log(test);
		// $.ajax({
		// 	url:"/userLogin",
		// 	success:function(result){
		// 		console.log("zxd"+test);
		// 	}});
	});

</script>
</html>
